import React, { useEffect, useMemo, useRef, useState } from "react"
import { useDispatch } from "react-redux"
import { Input, Button, Form } from 'antd'
import useGetRedux from "@/hooks/useGetRedux"
import useMsg from '@/hooks/useMsg.js'
import ATable from "../../components/ATable"
import AForm from "../../components/AForm"

const Home = (props) => {
  const dispatch = useDispatch()
  const messageApi = useMsg()
  setTimeout(() => {
    dispatch({
      type: 'SET_USERINFO',
      data: 'rsndm'
    })
  }, 3000)
  const userInfo = useGetRedux('userInfo')
  const columns = useMemo(() => ([
    {
      type: 'checkbox'
    },
    {
      dataIndex: 'name',
      title: 'name',
      onCell: (record) => ({
        record,
        editable: true,
        dataIndex: 'name',
        title: 'name',
        handleSave: (data) => {
          console.log(data)
        }
      })
    },
    {
      dataIndex: 'age',
      title: 'age'
    },
    {
      dataIndex: 'sex',
      title: 'sex'
    },
    {
      dataIndex: 'des',
      title: 'des'
    }
  ]), [])
  const [data, setData] = useState([])

  const test = () => {
    setData((prev) => {
      const newData = [
        ...prev,
        {
          id: prev.length,
          name: 'ddnb' + prev.length
        }
      ]
      return newData
    })
  }


  const [value, setValue] = useState()

  const [selectedId, setSelectedId] = useState([])
  const [virtual, setVirtual] = useState(false)

  const itemList = [
    { label: '姓名', name: 'name', rules: [{ required: true, message: '请输入' }] },
    { label: '年龄', name: 'age', rules: [{ required: true, message: '请输入' }] },
  ]

  const onValuesChange = (values) => {
    console.log(values);
  }

  const onFinish = (values) => {
    console.log(values);
  }
  const formRef = useRef()

  return <div>
    <AForm ref={formRef} itemList={itemList} onValuesChange={onValuesChange} onFinish={onFinish} >
      <Form.Item>
        <Button htmlType="submit">提交</Button>
      </Form.Item>
    </AForm>
    <div>{userInfo}</div>
    <Input value={value} onInput={(e) => setValue(e.target.value)} />
    <Button type="primary" onClick={test}>asdfasd</Button>
    <Button onClick={() => setVirtual(!virtual)}>切换</Button>
    <ATable
      virtual={virtual}
      selectedId={selectedId}
      setSelectedId={setSelectedId}
      scroll={{
        x: 500,
        y: 500
      }}
      // size='middle'
      // size='large'
      data={data}
      columns={columns}
    />
  </div>
}

export default Home
